<template>
  <div class="manage-page">
    <el-card class="card-form">
      <div class="my-project-title">项目管理</div>
      <el-form
        ref="queryForm"
        :inline="true"
        label-position="right"
        :model="queryForm"
        :rules="queryFormRules"
        size="medium"
      >
        <el-form-item label="项目名称">
          <el-input
            v-model="queryForm.name"
            maxlength="16"
            placeholder="请输入项目名称"
          />
        </el-form-item>
        <el-form-item label="项目类别">
          <el-select v-model="queryForm.type" placeholder="请选择项目类别">
            <el-option label="建设类（新开工）" value="0" />
            <el-option label="建设类（续建）" value="1" />
            <el-option label="购买服务类" value="2" />
            <el-option label="运维类" value="3" />
            <el-option label="其他" value="4" />
          </el-select>
        </el-form-item>
        <el-form-item label="投资估算(万元)">
          <div class="number-box">
            <el-input
              v-model="queryForm.investmentMin"
              maxlength="16"
              placeholder="请输入"
              class="rule-input"
              @input="
                queryForm.investmentMin = queryForm.investmentMin
                  .replace(/[^\d^\.]+/g, '')
                  .replace('.', '$#$')
                  .replace(/\./g, '')
                  .replace('$#$', '.')
              "
            />
            <span>—</span>
            <el-input
              v-model="queryForm.investmentMax"
              maxlength="16"
              placeholder="请输入"
              class="rule-input"
              @input="
                queryForm.investmentMax = queryForm.investmentMax
                  .replace(/[^\d^\.]+/g, '')
                  .replace('.', '$#$')
                  .replace(/\./g, '')
                  .replace('$#$', '.')
              "
            />
          </div>
        </el-form-item>
        <el-form-item label="项目性质">
          <el-select v-model="queryForm.nature" placeholder="请选择项目性质">
            <el-option label="年度项目" value="0" />
            <el-option label="增补项目" value="1" />
          </el-select>
        </el-form-item>
        <el-form-item label="项目单位">
          <el-select v-model="queryForm.company" placeholder="请选择项目单位">
            <el-option
              v-for="(item, index) in companydata"
              :key="index"
              :label="item"
              :value="item"
            />
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="handleQuery" size="small">
            查询
          </el-button>
          <el-button @click="resetQuery" size="small"> 重置 </el-button>
        </el-form-item>
      </el-form>
    </el-card>
    <div class="box-content">
      <!-- 列表头部 -->
      <div class="list-hd">
        <div
          :class="'item' + (listType == 'all' ? ' on' : '')"
          @click="handleListTabChange('all', '')"
        >
          全部
        </div>
        <div
          :class="'item' + (listType == 0 ? ' on' : '')"
          @click="handleListTabChange(0, '项目申报')"
        >
          <el-badge :value="projectCount.apply" class="item" type="primary"
            >项目申报</el-badge
          >
        </div>
        <div
          :class="
            'item' +
            (listType === 1 ? ' on' : '') +
            (approveFlag ? ' point' : '')
          "
          @click="handleListTabChange(1, '方案申报')"
        >
          <el-badge
            :value="projectCount.schemeDeclaration"
            class="item"
            type="primary"
            >方案申报</el-badge
          >
        </div>
        <div
          :class="'item' + (listType == 2 ? ' on' : '')"
          @click="handleListTabChange(2, '项目实施')"
        >
          <el-badge :value="projectCount.implement" class="item" type="primary"
            >项目实施</el-badge
          >
        </div>
        <div
          :class="'item' + (listType == 3 ? ' on' : '')"
          @click="handleListTabChange(3, '项目验收')"
        >
          <el-badge :value="projectCount.check" class="item" type="primary"
            >项目验收</el-badge
          >
        </div>
      </div>
      <div class="table-box">
        <div class="button-box">
          <el-button size="small" :class="item.value === processingStatus ? 'active' : 'plain' " v-for="item in processingStatusMap" :key="item.value" @click="changeProcessingStatus(item)">{{item.label}} </el-button>
        </div>
        <!-- 数据表格 -->
        <el-table v-loading="loading" :data="tableData" border>
          <el-table-column
            label="序号"
            align="center"
            type="index"
            width="65"
          />
          <el-table-column
            label="项目名称"
            align="center"
            prop="name"
            :show-overflow-tooltip="true"
            width="244"
          />
          <el-table-column
            label="申报时间"
            align="center"
            prop="createTime"
            :show-overflow-tooltip="true"
            width="120"
          >
            <template slot-scope="scope">
              <span>{{ formatDate(scope.row.createTime) }}</span>
            </template>
          </el-table-column>
          <el-table-column
            label="项目性质"
            align="center"
            prop="nature"
            :show-overflow-tooltip="true"
          >
            <template slot-scope="scope">
              <span>{{ scope.row.nature == 0 ? "年度项目" : "增补项目" }}</span>
            </template>
          </el-table-column>
          <el-table-column label="项目单位" align="center" prop="company" />
          <el-table-column
            label="项目类别"
            align="center"
            prop="type"
            :show-overflow-tooltip="true"
          >
            <template slot-scope="scope">
              <span>{{
                scope.row.type === '0'
                  ? "建设类（新开工）"
                  : scope.row.type === '1'
                  ? "建设类（续建）"
                  : scope.row.type === '2'
                  ? "购买服务类"
                  : scope.row.type === '3'
                  ? "运维类"
                  : "其他"
              }}</span>
            </template>
          </el-table-column>
          <el-table-column
            label="投资估算(万元)"
            align="center"
            prop="investmentEstimation"
            width="120"
          />
          <el-table-column label="项目阶段" align="center" prop="stag">
            <template slot-scope="scope">
              <span>{{ scope.row.stag }}</span>
            </template>
          </el-table-column>
          <!-- <el-table-column
            label="审核节点"
            align="center"
            prop="node"
            width="112"
            :show-overflow-tooltip="true"
          /> -->
          <el-table-column
            label="状态"
            align="center"
            width="120"
            prop="isState"
            :show-overflow-tooltip="true"
          >
            <template slot-scope="scope">
              
              <span :class="scope.row.isStateName|getIconClass" class="icon-state"><span></span></span>
              <span>{{ scope.row.isStateName }}</span>
            </template>
          </el-table-column>
          <el-table-column
            label="操作"
            align="center"
            class-name="small-padding fixed-width"
          >
            <template slot-scope="scope">
              <el-button
                size="mini"
                type="text"
                @click="handleView(scope.row.proId)"
                v-show="scope.row.isStateName != '待处理'"
                >查看详情</el-button
              >
              <el-button
                size="mini"
                type="text"
                @click="handleView(scope.row.proId)"
                v-show="scope.row.isState != 4 && scope.row.isStateName == '待处理'"
                >审批</el-button
              >
              <!-- <el-button
                size="mini"
                type="text"
                @click="handleDelete(scope.row)"
                v-show="scope.row.isState == '4'"
                >删除</el-button
              > -->
              <!-- <el-button
                size="mini"
                type="text"
                @click="handDialog(scope.row)"
                v-show="scope.row.nature == '1' && scope.row.isState == 1"
                >转为年度计划</el-button
              >                       -->
            </template>
          </el-table-column>
        </el-table>
      </div>
      <el-pagination
        background
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :page-size="queryForm.pageSize"
        :current-page="queryForm.pageNum"
      >
      </el-pagination>
    </div>
    <AnnualPlanDialog :proId="proId" :showAnnualPlanDialog="showAnnualPlanDialog" @changeShowDialog="changeShowDialog"/>
  </div>
</template>

<script>
import {
  getManageList,
  getDelete,
  getApplyCompany,
  getProjectCount,
} from "@/api/manage/manage";

import AnnualPlanDialog from './components/annualPlanDialog' //年度计划弹窗
function getIconClass(isStateName) {
  switch(isStateName) {
    case '待处理':
      return 'icon-orange';
    case '已处理':
      return 'icon-blue';
    case '已完成':
      return 'icon-green';
    default:
      return 'icon-blue';
  }
}
export default {
  components:{AnnualPlanDialog,},
  filters: {
    getIconClass
  },
  data() {
    const processingStatusMap  =  [
        ['all', '全部'],
        ['0', '待处理'],
        ['1', '已处理'],
        ['2', '已完成']
      ].map(([value,label]) => ({value,label}));
    return {
      // 是否显示弹出窗
      showAnnualPlanDialog: false,
      // 查询参数
      queryForm: {
        pageSize: 10,
        pageNum: 1,
      },
      total: 0,
      loading: false,
      tableData: [],
      projectStatus: [],
      queryFormRules: {},
      // 列表Tabs
      listType: "all",
      approveFlag: false,
      flagType: "", //切换tab的值
      companydata: [],
      projectCount: {}, //项目数量统计
      proId: null, // 当前项目ID
      processingStatusMap,
      processingStatus: 'all',
    };
  },
  created() {
    this.getDataList();
    this.getApplyCompanyList();
    this.getDicts("project_status").then((res) => {
      console.log(res);
      this.projectStatus = res.data;
    });
    this.getProjectCountNum();
  },
  methods: {
    /** 格式化时间 */
    formatDate(val) {
      return val.substring(0, 10);
    },
    /** 获取项目列表 */
    getDataList() {
      let data = JSON.parse(JSON.stringify(this.queryForm));
      const processingStatusQuery = this.getProcessingStatusQuery()
      getManageList({
        ...data,
        ...processingStatusQuery,
      }).then((res) => {
        console.log(res);
        this.tableData = res.list;
        this.total = res.total;
      });
    },
    handleQuery() {
      this.getDataList();
    },
    resetQuery() {
      this.queryForm = {
        pageSize: 10,
        pageNum: 1,
        name: undefined,
        type: undefined,
        investmentMin: undefined,
        investmentMax: undefined,
        nature: undefined,
        company: undefined,
        isState: undefined,
        stag: this.queryForm.stag,
      };
      this.getDataList();
    },
    // 列表tab切换
    handleListTabChange(val, text) {
      if (this.listType == val) return;
      this.listType = val;
      // if(val=="all"){
      //    this.queryForm.stag=''
      // }else{
      this.queryForm.stag = text;
      // }
      // if(this.flagType){
      //   this.getDataList(true)
      // }else{
      this.getDataList();
      // }
      // this.resetQuery()
    },
    handleView(val) {
      this.$router.push("/business_manage/manage/details?id=" + val);
    },
    /** 显示隐藏 弹窗操作*/
    handDialog(row) {
      this.rowData = row;
      if (row.nature == '1' && row.isState == 1) {
        this.showAnnualPlanDialog = true;
        this.proId = row.proId
      }
    },
    changeShowDialog(data) {
      if (data == "false") {
        this.showAnnualPlanDialog = false;
      } else {
        this.showAnnualPlanDialog = true;
      }
    },
    /** 分页 */
    handleSizeChange(val) {
      this.queryForm.pageSize = val;
      this.queryForm.pageNum = 1;
      this.getDataList();
    },
    handleCurrentChange(val) {
      this.queryForm.pageNum = val;
      this.getDataList();
    },
    /** 删除按钮操作 */
    handleDelete(row) {
      const proId = row.proId;
      this.$confirm("是否确认删除 ？", "删除", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
        customClass: "del_box",
      })
        .then(function () {
          return getDelete(proId);
        })
        .then(() => {
          this.getDataList();
          this.msgSuccess("删除成功");
        });
    },
    //获取项目单位
    getApplyCompanyList() {
      getApplyCompany().then((res) => {
        if (res.code == 200) {
          this.companydata = res.companyList;
        }
      });
    },
    //获取项目数量统计
    getProjectCountNum() {
      getProjectCount().then((res) => {
        this.projectCount = res;
      });
    },
    getProcessingStatusQuery() {
      return {
        processingStatus : this.processingStatus === 'all' ? undefined : this.processingStatus,
        // statusCollect: this.processingStatus === 'all' ? undefined : [''],
      };
    },
    changeProcessingStatus(data) {
      if (!data || this.projectStatus === data.value) return;
      this.processingStatus = data.value
      this.queryForm.pageNum = 1;
      this.getDataList();
    }
  },
};
</script>

<style lang="scss" scoped>
.manage-page {
  width: 100%;
  padding: 16px;
  height: 100%;
  background: #f5f5f5;
  .container-box {
    // width: 1670px;
    background: #fff;
    .main-title {
      font-size: 18px;
      font-family: PingFang SC, PingFang SC-Medium;
      font-weight: 500;
      color: #000000;
      line-height: 18px;
      padding: 24px;
    }
  }
  .box-content {
    background: #fff;
    margin-top: 10px;
    padding-bottom: 40px;
    padding-top: 24px;
    .list-hd {
      width: 1620px;
      margin: 0 auto;
      display: flex;
      padding: 0 24px;
      text-align: center;
      height: 48px;
      line-height: 48px;
      font-size: 16px;
      font-weight: bold;
      color: #000;
      border-bottom: 1px solid #ebecef;
      .item {
        position: relative;
        // width: 90px;
        height: 100%;
        margin: 0 11px;
        cursor: pointer;
        padding: 0 12px;
        &.on:before {
          content: "";
          position: absolute;
          left: 50%;
          transform: translateX(-50%);
          bottom: 0;
          width: 64px;
          height: 4px;
          // background: $base-logo-background;
        }

        &.point:after {
          content: "";
          position: absolute;
          right: 4px;
          top: 21px;
          width: 6px;
          height: 6px;
          border-radius: 50%;
          background: #ea4747;
        }
      }
    }
    .table-box {
      margin: 25px 0;
      padding: 0 24px;
      .state-span {
        display: flex;
        align-items: center;
        .out-line,
        .out-line2,
        .out-line4 {
          display: inline-block;
          width: 16px;
          height: 16px;
          background: rgba(49, 113, 238, 0.1);
          border-radius: 16px;
          margin-right: 10px;
          span {
            margin: 4px;
            width: 7px;
            height: 7px;
            background: #3171ee;
            border-radius: 16px;
            display: inline-block;
          }
        }
        .out-line2 {
          background: rgba(51, 168, 61, 0.1);
          span {
            background: #33a83d;
          }
        }
        .out-line4 {
          background: rgba(223, 32, 66, 0.1);
          span {
            background: #df2042;
          }
        }
      }
    }
    .el-pagination {
      text-align: center;
      margin-top: 40px;
    }
  }
}
.number-box {
  display: flex;
  width: 218px;
  border: 1px solid #d8d8d8;
  border-radius: 4px;
}
.rule-input {
  border: 0 !important;
}
.on {
  border-bottom: 4px solid #156fed;
}
</style>

<style lang="scss">
.card-form {
  .my-project-title {
    font-size: 18px;
    font-family: PingFang SC, PingFang SC-Medium;
    font-weight: 500;
    margin-bottom: 24px;
    color: #000000;
  }
  .el-card__body {
    padding-bottom: 0;
  }
  label {
    font-weight: normal !important;
  }
  .el-form--inline .el-form-item {
    margin-right: 60px;
  }
}
.manage-page .el-form-item .el-input__inner {
  width: 252px;
}
.manage-page .rule-input .el-input__inner {
  border: 0 !important;
  width: 100px !important;
}
.manage-page .vxe-table--render-default .vxe-header--column.col--ellipsis {
  height: 40px !important;
}
/* 对tabs标签右上角标记样式修改 */
.box-content .el-badge__content.is-fixed {
  position: absolute;
  top: 10px;
  right: 15px;
}
.button-box{
  height: 48px;
}
.el-button {
  &.plain{
    background: #ffffff;
      border: 1px solid #3171ee;
      border-radius: 4px;
      color: #3171ee;
  }
  &.active{
    color: #fff;
    background-color: #3171ee;
  }
}
</style>
